<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1"/>
		<title>DEMO:淘宝移动端首页</title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<header class="main_top">
			<h1>
				<img class="logo" src="img/taobao_logo.gif" title="taobao" />
			</h1>
			<a href="javascript:;">
				<img src="img/search_ico.gif" />
				<span>寻找宝贝店铺</span>
			</a>
		</header>
		<article class="wrap">
			<article class="func">
				<article class="banner">
					<div class="img-list">
						<img src="img/banner/banner_1.jpg" alt="" />
						<img src="img/banner/banner_2.jpg" alt="" />
						<img src="img/banner/banner_3.jpg" alt="" />
						<img src="img/banner/banner_4.jpg" alt="" />
						<img src="img/banner/banner_5.jpg" alt="" />
						<img src="img/banner/banner_6.jpg" alt="" />
						<img src="img/banner/banner_7.jpg" alt="" />
						<img src="img/banner/banner_8.jpg" alt="" />
					</div>
					<div class="btn-list">
						<span class="active"></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</div>
				</article>
				<nav>
					<ul>
						<li>
							<a href="javascript:;">
								<img src="img/nav/nav_1.png" alt="" />
								<h2>天猫</h2>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/nav/nav_2.png" alt="" />
								<h2>聚划算</h2>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/nav/nav_3.png" alt="" />
								<h2>天猫国际</h2>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/nav/nav_4.png" alt="" />
								<h2>外卖</h2>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/nav/nav_5.png" alt="" />
								<h2>天猫超市</h2>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/nav/nav_6.png" alt="" />
								<h2>充值中心</h2>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/nav/nav_7.png" alt="" />
								<h2>阿里旅行</h2>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/nav/nav_8.png" alt="" />
								<h2>领金币</h2>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/nav/nav_9.png" alt="" />
								<h2>到家</h2>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<img src="img/nav/nav_10.png" alt="" />
								<h2>到家</h2>
							</a>
						</li>
					</ul>
				</nav>
				<aside>
					<a href="">
						<h2>
							<img src="img/headline.gif" alt="" />
						</h2>
						<section>
							<img src="img/new.gif" alt="" />
							<span>今年寒冬毛衣才和你最配</span>
						</section>
					</a>
				</aside>
			</article>
			<article class="shelf">
				<section class="snap_up">
					<section class="left_big">
						<a href="javascript:;">
							<img src="img/snap/snap_1.gif" alt="" />
						</a>
						<article class="count_down">
							<strong>00</strong>
							<span>:</span>
							<strong>00</strong>
							<span>:</span>
							<strong>00</strong>
						</article>
					</section>
					<section class="top_big">
						<a href="javascript:;">
							<img src="img/snap/snap_2.gif" alt="" />
						</a>
					</section>
					<section class="btm_small_left">
						<a href="javascript:;">
							<img src="img/snap/snap_3.gif" alt="" />
						</a>
					</section>
					<section class="btm_small_right">
						<a href="javascript:;">
							<img src="img/snap/snap_4.gif" alt="" />
						</a>
					</section>
				</section>
				<section class="benefit">
					<h2>
						<img src="img/benefit/benefit_logo.gif" alt="" />
						<strong>超实惠</strong>
					</h2>
					<section class="top_1">
						<a href="javascript:;">
							<img src="img/benefit/benefit_1.gif" alt="" />
						</a>
					</section>
					<section class="top_2">
						<a href="javascript:;">
							<img src="img/benefit/benefit_2.gif" alt="" />
						</a>
					</section>
					<section class="top_3">
						<a href="javascript:;">
							<img src="img/benefit/benefit_3.gif" alt="" />
						</a>
					</section>
					<section class="top_4">
						<a href="javascript:;">
							<img src="img/benefit/benefit_4.gif" alt="" />
						</a>
					</section>
					<section class="btm_1">
						<a href="javascript:;">
							<img src="img/benefit/benefit_5.gif" alt="" />
						</a>
					</section>
					<section class="btm_2">
						<a href="javascript:;">
							<img src="img/benefit/benefit_6.gif" alt="" />
						</a>
					</section>
					<section class="btm_3">
						<a href="javascript:;">
							<img src="img/benefit/benefit_7.gif" alt="" />
						</a>
					</section>
					<section class="btm_4">
						<a href="javascript:;">
							<img src="img/benefit/benefit_8.gif" alt="" />
						</a>
					</section>
				</section>
			</article>
		</article>
		<footer class="main_btm">
			<hgroup>
				<h2>
					<a href="javascript:;">
						<img src="img/footer/footer_1.gif" alt="" />
					</a>
				</h2>
				<h2>
					<a href="javascript:;">
						<img src="img/footer/footer_2.gif" alt="" />
					</a>
				</h2>
				<h2>
					<a href="javascript:;">
						<img src="img/footer/footer_3.gif" alt="" />
					</a>
				</h2>
				<h2>
					<a href="javascript:;">
						<img src="img/footer/footer_4.gif" alt="" />
					</a>
				</h2>
				<h2>
					<a href="javascript:;">
						<img src="img/footer/footer_5.gif" alt="" />
					</a>
				</h2>
			</hgroup>
		</footer>
		<script type="text/javascript">
			var html = document.documentElement;
			var htmlW = html.getBoundingClientRect().width;
			html.style.fontSize = htmlW/20 + 'px';
		</script>
	</body>
</html>
